<template>
    <div class="active">
        <div v-if="activeShow">
            <van-nav-bar :title="$t('activate.title')" />
            <div class="activeMain">
                <div class="profit">
                    <img :src="activeImg" alt="">
                </div>
                <div class="list">
                    <div>
                        <span>TOP25</span>
                        <p class="tip">OECV</p>
                        <p class="userId"  v-for="item in top">{{item.invite_code}}</p>
                    </div>
                    <div>
                        <span>LUCKY25</span>
                        <p class="tip">OECV</p>
                        <p class="userId" v-for="item in luck">{{item}}</p>
                    </div>
                </div>
                <div class="btns">
                    <van-button class="btn"  @click="activeShow = false" :disabled="disBtn">{{btnStr}}</van-button>
                </div>
            </div>
        </div>
        <div v-if="!activeShow">
            <van-nav-bar :title="$t('activate.title')" left-arrow @click-left="activeShow = true"/>
            <div class="activeMain">
                <van-cell :title="$t('common.coin')" value="AAT"></van-cell>
                <van-cell :title="$t('common.amount')" value="1000"></van-cell>
                <button class="btn" @click="submit" >{{$t('activate.button')}}</button>
            </div>
        </div>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                desc:require('../../assets/decoration.png'),
                activeShow:true,
                brief:'',
                pwdShow:false,
                payPassword:'',
                disBtn:false,
                top:[],
                luck:[],
                activeImg:'',
                btnStr:this.$t('activate.button'),
                loadingShow:false
            }
        },
        methods: {
            submit(){
                this.pwdShow = true
            },
            getData(){
                this.$api.post('resonate/active')
                    .then(res =>{
                        this.brief = this.imgHost + res.detail.jj
                        if(res.detail.status >= 2){
                            this.disBtn = true
                            this.btnStr = this.$t('activate.actived')
                        }else{
                            this.disBtn = false
                            this.btnStr = this.$t('activate.button')
                        }
                        this.top = res.detail.top
                        this.luck = res.detail.lucks
                        if(this.top.length == 0){
                            this.top = ['1']
                        }
                        if(this.luck.length == 0){
                            this.luck = ['1']
                        }
                    })
                let area = this.$i18n.locale
                if(area === 'zh'){
                    this.activeImg = require('../../assets/active_zh.png')
                }else if(area === 'en'){
                    this.activeImg = require('../../assets/active_en.png')
                }
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                this.loadingShow = true
                this.$api.post('resonate/imactive',{paypassword:this.payPassword})
                    .then(res =>{
                        this.loadingShow = false
                        this.$toast(res.message)
                        this.pwdShow = false
                        this.activeShow = true
                        this.getData()
                    })
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            }
        },
        created() {
            if(this.$route.path === '/home/active'){
                this.$emit('changeIndex',1)
                this.$emit('tabDisappear',true)
            }
            this.getData()
        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .van-popup
        background: #160d01
        .van-nav-bar
            background: #160d01 !important;
        .van-picker
            color: #fff;
    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebedf0;
            border-bottom: 1px solid #ebedf0;
        }
        p{
            text-align: center;
            color: #FDDEB0;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            background: #403930 !important;
            color: #E6E6E6;
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                color: #000;
                background:linear-gradient(90deg,rgba(192,145,81,1) 0%,rgba(230,200,150,1) 100%);
                border: none;
                /*margin-left: 5%;*/
            }
        }
    }
    .activeMain
        width 94%
        margin 0 auto
        position relative
        padding-bottom 100px
        z-index 10
        .profit
            background bac
            border-radius 5px
            img
                width 100%
            p
                text-align center
                line-height 385px
                color font
        .btns
            position fixed
            bottom 60px
            width 100%
            left 0
            display flex
            justify-content center
            .btn
                color black
                width 94%
                margin  0 auto
        .list
            margin-top 24px
            display flex
            display -webkit-flex
            flex-flow row wrap
            justify-content space-between
            div
                width 47%
                border 2px solid font
                position relative
                min-height 200px
                border-radius 3px
                margin-bottom 20px
                span
                    background #1f1f1f url("../../assets/decoration.png") no-repeat center
                    background-size contain
                    display inline-block
                    width 125px
                    text-align center
                    font-size 16px
                    color font
                    padding-bottom 10px
                    position absolute
                    top -14px
                    left 50%
                    transform translateX(-50%)
                .tip
                    margin-top 25px
                    color #898989
                    text-align center
                .userId
                    margin-top 10px
                    text-align center
                    color #CBAF89
        .van-cell
            background bac !important
            border-radius 5px
            color #FFFFFF
            padding 25px 15px
            margin-bottom 5px
            .van-cell__value
                color font
        .van-cell:not(:last-child)::after
            border none


</style>